<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="icon" href="2021_img/sun.favicon.ico.png">

    <script src="./js/jquery.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <title>watch</title>
    <style>
        /* 初始化样式 */
        * {
          margin: 0;
          padding: 0;    
        }
        /* 清除列表样式 */
        ul,ol {list-style: none;}
        /* a标签去掉下划线 */
        .center ul li a {
          font-size: 18px;
          color: rgb(113, 156, 236);
          text-decoration: none;
        }
        /* 清除浮动 */
        .clearfix::after{
          content: "";
          display: block;
          clear: both;
        }
        /* 导航部分 */
        .nav {
          background-color: rgb(240, 229, 216);
        }
        /* 定宽居中 */
        .center {
          width: 1200px;
          margin: auto;
        }
        .nav h1 {
          color: rgb(233, 141, 141);
          font-weight: 600;
          float: left;
          /* 加右外间距使h2左边有一段距离 */
          margin-right: 120px;
          /* 加行高使h2垂直居中 */
          line-height: 50px;
          margin-top: 28px;
        }
        .nav ul {
          float: right;
          height: 50px;
          /* 让li横着排列 */
          display: flex;
          margin: 30px 90px;
          font-size: 16px;
        }
        .nav ul li {
          /* 给li宽和高 然后让她水平居中 垂直居中 */
          width: 150px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          transition: 1s;
          margin: 0px 5px;
          border-radius: 15% 15% 70% 75%;
          background-color:rgb(245, 173, 168)
        }
        .nav ul li:hover {
          border-radius: 15% 15% 70% 75%;
          background-color:rgba(109, 189, 192,0.8);
        }
        .nav ul li:hover >a {
          color: #fff;      
        }
        .logo-bg {
          margin-top: 110px;
          height: 418px;
          background-image: url(./2021_img/background2.jpg);
          background-size: cover;
        }
        .logo-bg img {
            width: 100%;
            height: 100%;
            background-size: contain;
        }
        .logo {
          margin: 16px 0px;
          height: 250px;
          background-color: rgb(245, 135, 135);
        }
        .logo img {
          width: 100%;
          height: 100%;
          background-size: contain;
        }
        .read {
            width: 100%;
            height: 80px;
            /* background-color: darksalmon; */
            border: 4px dotted goldenrod;
            text-align: center;
            color: rgb(82, 60, 143);
            margin: 10px 0px;
        }
        .rl {
            width: 620px;
            height: 400px;
            margin-right: 30px;
        } 
        .rl img {
            width: 620px;
            height: 400px;
            /* margin: 60px ; */
        }
        .rr {
            width: 550px;
            height: 400px;
            /* background-color: rgb(106, 229, 233); */
            padding-left: 28px; 
            color: rgb(107, 109, 6);
        }
        .rr input {
            width: 360px;
            height: 35px;
            border: 2px solid rgb(99, 50, 177);
            border-radius: 8px;
            margin: 18px 15px;
            
        }
        .rr button{
            width: 60px;
            height: 30px;
            background-color: bisque;
            margin: 70px 0px 0px -443px;
            border: 2px solid rgb(50, 120, 177);
            color: rgb(92, 87, 87);
            border-radius: 4px;
        }
        /* ******页尾***** */
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            margin-top: 40px;
            background-color:rgba(159, 106, 180, 0.8)
            
        }
        ul {
            justify-content: center;
            margin: auto;
            list-style: none;
            
        }
        .two li {
            width: 100px;
            height: 100px;
            margin: 86px 120px 120px;
            text-align: center;
            color: rgb(242, 244, 245);
        }
        .two img {
            width: 100px;
            height: 100px;
        }
        .two li span {
            font-size: 18px;
        }
        .two li p {
            margin-left: -30px;
            width: 160px;
            text-align: center;
            font-size: 14px;
        }
        .tab {
          font-size: 18px;
          color: rgb(146, 48, 212);
        }
        .tab input{
          width: 466px;
          height: 40px;
          border: 2px solid rgb(146, 48, 212);
          margin-left: 5px;
          border-radius: 6px;
        }
        .tab button{
          width: 70px;
          height: 40px;
          color: #fff;
          background-color: rgb(169, 104, 212);
          border: 2px solid rgb(52, 161, 235);
          border-radius: 3px;
        }
      </style>
</head>
<body>
    <!-- 页头 -->
        <div class="nav fixed-top d-flex">
        <div class="center clearfix">
          <h1>Flower Sea</h1>
            <ul>
              <li><a href="#">首 页</a></li>
              <li><a href="#">展 览</a></li>
              <li><a href="#">看 点</a></li>
              <li><a href="#">订 阅</a></li>
            </ul>
        </div>
      </div>
      <!-- 第一张大背景 -->
            <div class="logo-bg"></div>
      <!-- 背景图下面的图文 -->
      <div class="center">
          <div class="read">
              <h3>联系我们</h3>
              <h5>CONTACT US</h5>
          </div>
          <div class="read1 d-flex">
              <div class="rl float-left">
                  <img src="./2021_img/yuan3.png" alt="">
              </div>
              <table class="tab">
                <tr>
                  <td>反馈主题:</td>
                  <td>
                    <input type="text">
                  </td>
                </tr>
                <tr>
                  <td>电子邮箱:</td>
                  <td>
                    <input type="text">
                  </td>
                </tr>
                <tr>
                <td>联系电话:</td>
                <td>
                  <input type="text">
                </td>
                </tr>
                <tr>
                  <td>联系人:</td>
                  <td>
                    <input type="text">
                  </td>
                </tr>
                <tr>
                  <td>验证码:</td>
                  <td>
                    <input type="text">
                  </td>
                </tr>
                <tr>
                  <td>
                    <button>提 交</button>
                  </td>
                </tr>
              </table>
          </div>
      </div>
      <div class="one">
        <ul class="two d-flex">
            <li class="float-left">
                <img src="./2021_img/footer.png" alt="">
                <span>品牌精神</span>
                <p>行业新品牌，引领 花卉行业新品质</p>
            </li>
            <li class="float-left">
                <img src="./2021_img/footer2.png" alt="">
                <span>退订无忧</span>
                <p>网上订购货物，一律支持 7天无理由退货</p>
            </li>
            <li class="float-left">
                <img src="./2021_img/footer6.png" alt="">
                <span>邮资服务</span>
                <p>网上下单，邮资服务支持 全场满199元包邮</p>
            </li>
            <li class="float-left">
                <img src="./2021_img/footer4.png" alt="">
                <span>运输包装</span>
                <p>由于是鲜花类物品，包装前会用保鲜剂放礼盒</p>
            </li>
        </ul>
    </div>
</body>
</html>